<template>
    <view>
        <u-popup :show="recordShow" mode="bottom" bgColor="transparent">
            <view class="tanchuang_box"
                style="background-image: url('https://morgan.dingxians.cn/upload/20241017/6710e9c517f9a.png');">
                <view class="top_box">确认订单
                    <view class="image_chahao_box" @click="hidePopup">
                        <image src="https://morgan.dingxians.cn/static/shopdetail/9.png" mode="scaleToFill" />
                    </view>
                </view>

                <view class="shopjeji_box">
                    <view class="shangpinxinxi_box" v-for="(i, d) in orderDetail.user_prizes">
                        <view class="left_pic_box">
                            <image :src="i.box_prize_image" mode="scaleToFill" />
                        </view>
                        <view class="right_bosx">
                            <view class="title_box">{{ i.box_prize_name }}</view>
                            <view class="pice_box">¥{{ i.price }}</view>
                        </view>
                    </view>
                </view>
                <view class="yunfei_bxo" style="margin-bottom: 40rpx;">
                    <view class="left_box">运费</view>
                    <view class="right_box">{{ orderDetail.freight_amount }}</view>
                </view>
                <template v-if="Object.keys(orderDetail.user_address).length > 0">
                    <view class="yunfei_bxo" style="margin-bottom: 40rpx;">
                        <view class="left_box">姓名</view>
                        <view class="right_box">{{ orderDetail.user_address.username }}</view>
                    </view>
                    <view class="yunfei_bxo" style="margin-bottom: 40rpx;">
                        <view class="left_box">联系方式</view>
                        <view class="right_box">{{ orderDetail.user_address.mobile }}</view>
                    </view>
                    <view class="yunfei_bxo" style="margin-bottom: 40rpx;">
                        <view class="left_box">地址</view>
                        <view class="right_box" @click="editBtn(orderDetail.user_address)">
                            {{ orderDetail.user_address.province + orderDetail.user_address.city +
                                orderDetail.user_address.area }}
                            <u-icon name="arrow-right" color="#FFFFFF" size="18"></u-icon>
                        </view>
                    </view>
                    <view class="yunfei_bxo" style="margin-bottom: 40rpx;">
                        <view class="left_box">详细地址</view>
                        <view class="right_box">{{ orderDetail.user_address.detail }}</view>
                    </view>
                </template>
                <template v-else>
                    <view class="yunfei_bxo" style="margin-bottom: 40rpx;">
                        <view class="left_box">地址</view>
                        <view class="right_box" @click="selAddressBtn">选择地址
                            <u-icon name="arrow-right" color="#FFFFFF" size="18"></u-icon>
                        </view>
                    </view>
                </template>
                <view class="yunfei_bxo" style="margin-bottom: 40rpx;">
                    <view class="left_box">优惠券</view>
                    <view class="right_box">选择
                        <u-icon name="arrow-right" color="#FFFFFF" size="18"></u-icon>
                    </view>
                </view>
                <view class="yunfei_bxo" style="margin-bottom: 40rpx;">
                    <view class="left_box">备注</view>
                    <view class="right_box"><u--input placeholder="请输入" color="#FFFFFF" inputAlign="right"
                            :value="detailedvalue" v-model="detailedvalue" @change="detailedchange"></u--input><u-icon
                            name="arrow-right" color="#FFFFFF" size="18"></u-icon>
                    </view>
                </view>
                <view class="pay_type_box">
                    <view class="pay_title_box">支付方式</view>
                    <view class="zy_pay_type_box" v-for="(item, index) in payList" :key="index" @click="payType(item)">
                        <view class="left_pay_icon_txt_box">
                            <view class="le_pay_icon_box">
                                <image :src="item.icon" mode="scaleToFill" />
                            </view>
                            <view class="pay_txt_box">{{ item.text }}</view>
                        </view>
                        <view class="right_icon_age_box">
                            <image v-if="payId == item.id" src="https://morgan.dingxians.cn/static/payImg/10.png"
                                mode="scaleToFill" />
                            <image v-else src="https://morgan.dingxians.cn/static/payImg/7.png" mode="scaleToFill" />
                        </view>
                    </view>
                </view>
                <view class="pay_price_big_box">
                    <view class="zs_pice_box">
                        <text style="font-size: 24rpx;color: #fff;">合计：</text>
                        ￥{{ orderDetail.pay_amount || '0.00' }}
                    </view>
                    <view class="rtds_box"
                        style="background-image: url('https://morgan.dingxians.cn/static/shopdetail/2.png');"
                        @click="enterSubmit">
                        确认购买</view>
                </view>
            </view>
        </u-popup>

    </view>
</template>
<script>
export default {
    props: {
        recordShow: {
            type: Boolean,
            default: false
        },
        value: {
            type: Number,
            default: 1,
        },
        user_index: {
            type: Number,
            default: 1,
        },
        payId: {
            type: String,
            default: ''
        },
        shopNmae: {
            type: String,
            default: ''
        },
        shopImg: {
            type: String,
            default: ''
        },
        orderDetail: {
            type: Object,
            default: {}
        },
        zongPrice: {
            type: [Number, String],
            defalut: ''
        },
        price: {
            type: [Number, String],
            defalut: ''
        },
    },
    data() {
        return {
            internalValue: this.value,
            payList: [
                // #ifndef MP-ALIPAY
                {
                    id: 1,
                    text: '微信',
                    icon: 'https://yq.dingxians.cn/upload/static/pay_icon/04.png'
                },
                // #endif
                // #ifdef APP-PLUS
                {
                    id: 2,
                    text: '支付宝',
                    icon: 'https://yq.dingxians.cn/upload/static/pay_icon/05.png'
                }
                ,
                // #endif
                // #ifdef MP-ALIPAY
                {
                    id: 3,
                    text: '支付宝',
                    icon: 'https://yq.dingxians.cn/upload/static/pay_icon/05.png'
                }
                // #endif
            ],
        }
    },
    methods: {
        hidePopup() {
            this.$emit('handlePopup')
        },
        selAddressBtn() {
            this.$emit('selAddressBtn')
        },
        enterSubmit() {
            this.$emit('enterSubmit')
        },
        detailedchange(e) {
            this.$emit('detailedchange', e)
        },
        payType(item) {
            this.$emit('payType', item)
        },
        editBtn(item) {
            this.$emit('editBtn', item)
        },

    }
}
</script>
<style lang="scss" scoped>
.tanchuang_box {
    width: 750rpx;
    // min-height: 1000rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 53rpx;
    position: relative;


    .top_box {
        width: 100%;
        height: 31rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 31rpx;
        text-align: center;
        position: relative;
        margin-bottom: 32rpx;

        .image_chahao_box {
            position: absolute;
            height: 25rpx;
            width: 24rpx;
            top: 3rpx;
            right: 38rpx;

            image {
                width: 100%;
                height: 100%;
            }

        }

    }

    .shopjeji_box {
        width: 100%;
        height: 200rpx;
        overflow: hidden;
        overflow-y: auto;

        .shangpinxinxi_box {
            width: 100%;
            height: 160rpx;
            display: flex;
            justify-content: flex-start;
            box-sizing: border-box;
            padding: 0 30rpx;
            position: relative;
            margin-bottom: 50rpx;
            margin-bottom: 10rpx;

            .left_pic_box {
                width: 140rpx;
                height: 140rpx;
                background: #170103;
                border-radius: 10rpx;
                margin-right: 19rpx;

                image {
                    width: 140rpx;
                    max-height: 140rpx;
                    border-radius: 10rpx;
                }
            }

            .right_bosx {
                height: 160rpx;
                box-sizing: border-box;
                padding-top: 6rpx;

                .title_box {
                    width: 400rpx;
                    height: 42rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 42rpx;
                    overflow: hidden;
                    overflow-x: auto;
                    white-space: nowrap;
                    margin-bottom: 81rpx;
                }

                .pice_box {
                    height: 30rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 32rpx;
                    color: #FFEDD7;
                    line-height: 30rpx;
                }
            }

        }
    }


    .yunfei_bxo {
        width: 100%;
        height: 40rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_box {
            height: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 30rpx;
        }

        .right_box {
            height: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 30rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

    }

    .pay_type_box {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;
        margin-bottom: 20rpx;

        .pay_title_box {
            width: 100%;
            height: 31rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 31rpx;
            margin-bottom: 30rpx;
        }

        .zy_pay_type_box {
            width: 100%;
            height: 40rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;

            .left_pay_icon_txt_box {
                // width: 50%;
                height: 100%;
                display: flex;
                justify-content: flex-start;

                .le_pay_icon_box {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 20rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .pay_txt_box {
                    height: 40rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 40rpx;
                }
            }

            .right_icon_age_box {
                width: 38rpx;
                height: 38rpx;

                image {
                    width: 38rpx;
                    height: 38rpx
                }
            }

            .right_icon_cocupup_box {
                height: 40rpx;
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .yohuiquan_box {
                    height: 40rpx;
                    line-height: 40rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #FFFFFF;

                }

                .jiantou_box {
                    height: 32rpx;
                    line-height: 46rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    margin-left: 13rpx;
                }
            }
        }
    }

    .pay_price_big_box {
        width: 100%;
        height: 80rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 60rpx;

        .zs_pice_box {
            height: 80rpx;
            font-family: PingFang SC;
            font-weight: 600;
            font-size: 48rpx;
            color: rgba(245, 97, 151, 1);
            line-height: 80rpx;
        }

        .rtds_box {
            width: 289rpx;
            height: 77rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            background-size: 100% 100%;
            color: #FFFFFF;
            line-height: 77rpx;
            text-align: center;
        }
    }
}
</style>